<template>
  <section id = "foot_nav">
    <section v-on:click="gotoAddress({path: '/index'})" class="foot_item">
      <img class="icon_style" v-bind:src="$route.path.indexOf('index')!==-1 || $route.path.length == 1 | indexImg " />
      <div :class="{'icon-text': true, 'color-default': $route.path.indexOf('index') >= 0 || $route.path.length == 1}">技能培训</div>
    </section>

    <section v-on:click="gotoAddress({path: '/information'})" class="foot_item">
      <img class="icon_style" v-bind:src="$route.path.indexOf('information') | infoImg " />
      <div :class="{'icon-text': true, 'color-default': $route.path.indexOf('information') >= 0}">信息公开</div>
    </section>

    <!-- <section v-on:click="gotoAddress({path: '/entrepreneurship'})" class="foot_item"> -->
    <section  class="foot_item">
      <img class="icon_style" v-bind:src="$route.path.indexOf('entrepreneurship') | entreImg " />
      <div :class="{'icon-text': true, 'color-default': $route.path.indexOf('entrepreneurship') >= 0}">创业培训</div>
    </section>

    <section v-on:click="gotoAddress({path: '/employment'})" class="foot_item">
      <img class="icon_style" v-bind:src="$route.path.indexOf('employment') | empImg " />
      <div :class="{'icon-text': true, 'color-default': $route.path.indexOf('employment') >= 0}">精准就业</div>
    </section>

    <section v-on:click="gotoAddress({path: '/personal'})" class="foot_item">
      <img class="icon_style" v-bind:src="$route.path.indexOf('personal') | perImg " />
      <div :class="{'icon-text': true, 'color-default': $route.path.indexOf('personal') >= 0}">个人中心</div>
    </section>

  </section>
</template>

<script type="text/ecmascript-6">
  import index_b from '@/assets/images/技能培训选中.png'
  import index_p from '@/assets/images/技能培训.png'
  import info_b from '@/assets/images/信息公开选中.png'
  import info_p from '@/assets/images/信息公开.png'
  import entre_b from '@/assets/images/创业培训选中.png'
  import entre_p from '@/assets/images/创业培训.png'
  import emp_b from '@/assets/images/精准就业选中.png'
  import emp_p from '@/assets/images/精准就业.png'
  import per_b from '@/assets/images/个人中心选中.png'
  import per_p from '@/assets/images/个人中心.png'

  export default {
    data() {
      return {
      }
    },
    created(){
    },
    mounted(){

    },
    computed: {

    },

    methods: {
      gotoAddress(path){
        this.$router.push(path)
      }
    },

    filters: {
      indexImg : function (value) {
        if (value) {
          return index_b
        } else {
          return index_p
        }
      },
      infoImg : function (value) {
        if (value !== -1 ) {
          return info_b
        } else {
          return info_p
        }
      },
      entreImg : function (value) {
        if (value !== -1 ) {
          return entre_b
        } else {
          return entre_p
        }
      },
      empImg : function (value) {
        if (value !== -1 ) {
          return emp_b
        } else {
          return emp_p
        }
      },
      perImg : function (value) {
        if (value !== -1 ) {
          return per_b
        } else {
          return per_p
        }
      }

    }
  }

</script>


<style lang="scss" scoped>
  @import '../../assets/css/mixin.scss';
  $scale: 1px;
  #foot_nav{
    background-color: #fff;
    position: fixed;
    z-index: 100;
    left: 0;
    right: 0;
    bottom: 0;
    @include wh(100%, 62.4 * $scale);
    display: flex;
    box-shadow: 0 -0.026667rem 0.053333rem rgba(0,0,0,.1);
    .color-default{
      color: #0066cc;
    }
    .icon-text {
      padding-top: 2px;
      font-size: 11px;
    }
  }
  .foot_item{
    flex: 1;
    display: flex;
    text-align: center;
    flex-direction: column;
    align-items: center;
    color: #666666;
    img{
      height: 24px;
      width: 24px;
    }
  }
  .icon_style{
    @include wh(25.6 * $scale, 25.6 * $scale);
    margin-top: 12 * $scale;
    fill: #ccc;
  }
  span{
    @include sc(14.4 * $scale, #666);
  }

</style>


